﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="List.aspx.cs" Inherits="NX5Web.admin.Settle.List" %>



<div id="subApp" style="margin:15px;"> 
     

       <el-dialog v-model="detailshow"  title="明细" width="770"  >
       <el-table :data="DetailList" style="width: 100%"> 
           <el-table-column label="学生"  width="180">
             <template #default="scope">{{ scope.row.Title }}</template>
           </el-table-column>
           <el-table-column label="时间"  width="190">
             <template #default="scope">{{ scope.row.StudyDay }}</template>
           </el-table-column>
           <el-table-column label="类型"  width="120">
             <template #default="scope">{{ scope.row.LessonType==1?'常规课':'保温课' }}</template>
           </el-table-column>
           <el-table-column label="试用"  width="80">
             <template #default="scope">{{ scope.row.IsTaste?'是':'否' }}</template>
           </el-table-column>
           <el-table-column label="课时费"  width="120">
               <template #default="scope">{{ scope.row.FeeRMB }}</template>
           </el-table-column>
       </el-table> 
</el-dialog>
     

    <div style="margin-top:10px;">
        <el-form :inline="true" :model="filterform" ref="filterform"> 
            <el-form-item label="姓名" prop="Name">
                <el-input v-model="filterform.Name" placeholder="请输入老师姓名"></el-input>
            </el-form-item>
            <el-form-item label="电话" prop="Phone">
                <el-input v-model="filterform.Phone" placeholder="请输入电话"></el-input>
            </el-form-item>  
            <el-form-item label="结算日期" prop="SBRANG">
                <el-date-picker
                    v-model="filterform.SBRANG"
                    type="daterange"
                    range-separator="-"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期" 
                /> 
            </el-form-item> 
            <el-form-item label="结算状态" prop="Paid">
                <el-select v-model="filterform.Paid" style="width:100px">
                      <el-option label="全部" :value="0"></el-option>
                      <el-option label="已结清" :value="1"></el-option>
                      <el-option label="未结清" :value="2" ></el-option>
                  </el-select>
            </el-form-item>  
             <el-form-item>
              <el-button type="primary" @click="resetFilter">重置</el-button>
            </el-form-item>
        </el-form>
    </div>

    <div style="">
        <el-table :data="tableData" style="width: 100%">
           <%--<el-table-column type="selection" width="55" ></el-table-column>--%>
            <el-table-column label="结算方式">
              <template #default="scope">{{ scope.row.Title }}</template>
            </el-table-column>
           <el-table-column label="教师" width="120">
             <template #default="scope">{{ scope.row.Name }}</template>
           </el-table-column>
            <el-table-column label="电话" width="140">
  <template #default="scope">{{ scope.row.Phone }}</template>
</el-table-column>
                        <el-table-column label="结算日期" width="180">
    <template #default="scope">{{ scope.row.Created.replace('T',' ').split('.')[0] }}</template> 
</el-table-column>
                        <el-table-column label="总课时量"  width="100">
    <template #default="scope">{{ scope.row.LessonCount }}</template> 
</el-table-column>
           <el-table-column label="费用"  width="100">
               <template #default="scope">{{ scope.row.FeeRMB }}</template> 
           </el-table-column>   
            <el-table-column label="结算" width="80" >
    <template #default="scope">{{ scope.row.Paid?'已结清':'未结清' }}</template> 
</el-table-column>   
           <el-table-column width="160">
              <template #default="scope">   
                  <el-button size="small" @click="getdetail(scope.$index, scope.row)">明细</el-button> 
                  <el-button v-if="!scope.row.Paid" size="small" type="success" @click="pay(scope.$index, scope.row)">结清</el-button> 
              </template>
            </el-table-column>
        </el-table>

        <div style="margin-top:10px;">
            <el-pagination
              v-model:current-page="pageIndex"
              v-model:page-size="pageSize"
              :page-sizes="[10, 20, 30, 40]"
              layout="total, sizes, prev, pager, next, jumper"
              :total="totalCount"
              @size-change="pageSizeChange"
              @current-change="pageNumberChange"
            />
        </div>
    </div> 
</div>
<script>
    var subApp = createApp({
        el: '#subApp',
        data() {
            return { 
                filterform: {
                    Name: null,
                    Phone: null,
                    Paid: 0,
                    SBRANG:null
                },
                detailshow: false,
                DetailList:[],
                SettleList: [],
                totalCount: 0,
                pageIndex: 1,
                pageSize: 10,
            };
        },
        computed: {
            tableData() {

                var start = null;
                var end = null;
                if (this.filterform.SBRANG != null) {
                    start = this.filterform.SBRANG[0];
                    end = new Date(this.filterform.SBRANG[1].toString());
                    end = new Date(end.setDate(end.getDate() + 1));
                }

                var temp = this.SettleList.filter(x => {
                    return (
                        (this.filterform.Name == null || x.Name.indexOf(this.filterform.Name) != -1)
                        && (this.filterform.Phone == null || x.Phone.indexOf(this.filterform.Phone) != -1)
                        && (this.filterform.Paid == 0 || x.Paid == (this.filterform.Paid==1?true:false))
                        && (this.filterform.SBRANG == null || ((new Date(x.Created) >= start && new Date(x.Created) <= end)))
                    );
                });
                this.totalCount = temp.length;

                return temp.slice((this.pageIndex - 1) * this.pageSize, this.pageIndex * this.pageSize);
            }
        },
        methods: {  
            resetFilter() {
                this.$refs.filterform.resetFields()
            },
            pageNumberChange(pageIndex) {
                this.pageIndex = pageIndex;
            },
            pageSizeChange(pageSize) {
                this.pageIndex = 1;
                this.pageSize = pageSize;
            },
            pay(index, row) {
                if (window.confirm("是否结清该笔课时费?")) { 
                    loaddingPlus(true); 
                    ktlapi({
                        "apiurl": OT.CommandSet,
                        "action": "PaySettleDetail",
                        "data": {
                            ID: row["ID"]
                        }
                    }).then(res => {
                        row["Paid"] = true;
                        loaddingPlus(false);
                    });
                }  
            },
            getdetail(index,row) {
                this.detailshow = true;
                loaddingPlus(true);
                var user = new ktluser();
                ktlapi({
                    "apiurl": OT.CommandSet,
                    "action": "GetSettleDetail",
                    "data": {
                        ID: row["ID"]
                    }
                }).then(res => {
                    this.DetailList = res.data.tables[0].table;
                    loaddingPlus(false);
                });
            },
            loadData() {
                loaddingPlus(true);
                var user = new ktluser();
                ktlapi({
                    "apiurl": OT.CommandSet,
                    "action": "GetAllSettle",
                    "data": {
                        CompanyId: user.userInfo().CompanyId
                    }
                }).then(res => {
                    this.SettleList = res.data.tables[0].table; 
                    loaddingPlus(false);
                });
            },
            init() { 
                this.loadData();
            }
        },
        mounted: function () {
            this.init();
        }
    });
</script>